<script setup>
import { ref } from 'vue'

// 蜡笔小新角色数据
const characters = [
  {
    id: 1,
    name: '野原新之助',
    description: '5岁，向日葵班学生，活泼可爱、调皮捣蛋，喜欢动感超人！',
    color: 'bg-yellow-100',
    image: 'https://picsum.photos/seed/shinchan1/200/200'
  },
  {
    id: 2,
    name: '野原美伢',
    description: '29岁，全职家庭主妇，身经百战的妈妈，有点小暴躁但很温柔。',
    color: 'bg-pink-100',
    image: 'https://picsum.photos/seed/shinchan2/200/200'
  },
  {
    id: 3,
    name: '野原广志',
    description: '35岁，大型企业科长，工作努力经常加班，有责任感的爸爸。',
    color: 'bg-blue-100',
    image: 'https://picsum.photos/seed/shinchan3/200/200'
  },
  {
    id: 4,
    name: '野原向日葵',
    description: '0岁，野原家的幼女，刘海有三个角，活泼可爱的小婴儿。',
    color: 'bg-orange-100',
    image: 'https://picsum.photos/seed/shinchan4/200/200'
  },
  {
    id: 5,
    name: '小白',
    description: '野原家的宠物狗，聪明伶俐，能听懂简单指令，喜欢和小新玩耍。',
    color: 'bg-gray-100',
    image: 'https://picsum.photos/seed/shinchan5/200/200'
  },
  {
    id: 6,
    name: '风间彻',
    description: '5岁，小新好友，性格认真，有点洁癖，学习成绩好，梦想当商人。',
    color: 'bg-green-100',
    image: 'https://picsum.photos/seed/shinchan6/200/200'
  },
  {
    id: 7,
    name: '佐藤正男',
    description: '5岁，小新好友，性格胆小，容易哭，喜欢收集稀有卡片。',
    color: 'bg-purple-100',
    image: 'https://picsum.photos/seed/shinchan7/200/200'
  },
  {
    id: 8,
    name: '阿呆',
    description: '5岁，小新好友，性格沉默寡言，喜欢收集石头，是个小哲学家。',
    color: 'bg-brown-100',
    image: 'https://picsum.photos/seed/shinchan8/200/200'
  }
]

// 登录注册功能状态
const showLoginModal = ref(false)
const showRegisterModal = ref(false)
const currentUser = ref(null)

// 登录表单数据
const loginForm = ref({
  username: '',
  password: ''
})

// 注册表单数据
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: ''
})

// 显示登录模态框
const openLogin = () => {
  showLoginModal.value = true
  showRegisterModal.value = false
}

// 显示注册模态框
const openRegister = () => {
  showRegisterModal.value = true
  showLoginModal.value = false
}

// 关闭模态框
const closeModals = () => {
  showLoginModal.value = false
  showRegisterModal.value = false
}

// 处理登录
const handleLogin = () => {
  // 这里只是模拟登录，实际应该调用API
  if (loginForm.value.username && loginForm.value.password) {
    currentUser.value = {
      username: loginForm.value.username
    }
    closeModals()
    alert('登录成功！欢迎 ' + loginForm.value.username)
    // 重置表单
    loginForm.value = {
      username: '',
      password: ''
    }
  } else {
    alert('请输入用户名和密码')
  }
}

// 处理注册
const handleRegister = () => {
  // 这里只是模拟注册，实际应该调用API
  if (!registerForm.value.username || !registerForm.value.password) {
    alert('请填写用户名和密码')
    return
  }
  
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }
  
  alert('注册成功！请登录')
  // 切换到登录页面
  openLogin()
  // 重置表单
  registerForm.value = {
    username: '',
    password: '',
    confirmPassword: ''
  }
}

// 处理登出
const handleLogout = () => {
  currentUser.value = null
  alert('已登出')
}

// 轮播图数据
const carouselItems = [
  {
    id: 1,
    image: '@/assets/shinchan-family.svg',
    title: '蜡笔小新全家福',
    description: '野原一家和朋友们的欢乐时光'
  },
  {
    id: 2,
    image: 'https://picsum.photos/seed/shinchan1/1200/500',
    title: '小新的幼稚园日常',
    description: '在双叶幼稚园与小伙伴们的有趣故事'
  },
  {
    id: 3,
    image: 'https://picsum.photos/seed/shinchan2/1200/500',
    title: '野原家的温馨生活',
    description: '充满欢笑与爱的家庭日常'
  },
  {
    id: 4,
    image: 'https://picsum.photos/seed/shinchan3/1200/500',
    title: '动感超人登场',
    description: '小新最爱的超级英雄'
  }
]

// 轮播图状态
const currentSlide = ref(0)
const slideInterval = ref(null)

// 切换到指定幻灯片
const goToSlide = (index) => {
  currentSlide.value = index
}

// 下一张幻灯片
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselItems.length
}

// 上一张幻灯片
const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + carouselItems.length) % carouselItems.length
}

// 开始自动轮播
const startAutoPlay = () => {
  slideInterval.value = setInterval(nextSlide, 5000)
}

// 停止自动轮播
const stopAutoPlay = () => {
  if (slideInterval.value) {
    clearInterval(slideInterval.value)
  }
}

// 组件挂载时开始自动轮播
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  startAutoPlay()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoPlay()
})</script>

<template>
  <main class="min-h-screen bg-blue-50 font-sans relative">
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 pointer-events-none z-0">
      <div class="absolute top-20 left-10 w-16 h-16 bg-yellow-200 rounded-full opacity-50"></div>
      <div class="absolute top-40 right-20 w-20 h-20 bg-pink-200 rounded-full opacity-50"></div>
      <div class="absolute bottom-40 left-20 w-24 h-24 bg-blue-200 rounded-full opacity-50"></div>
      <div class="absolute bottom-20 right-40 w-16 h-16 bg-green-200 rounded-full opacity-50"></div>
      <!-- 彩色圆点装饰 -->
      <div class="absolute top-1/4 left-1/4 w-4 h-4 bg-red-400 rounded-full opacity-70"></div>
      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-purple-400 rounded-full opacity-70"></div>
      <div class="absolute bottom-1/4 right-1/3 w-4 h-4 bg-orange-400 rounded-full opacity-70"></div>
      <div class="absolute bottom-1/3 left-1/3 w-3 h-3 bg-teal-400 rounded-full opacity-70"></div>
    </div>

    <!-- 特色头部 - 蜡笔小新风格 -->
    <div class="bg-yellow-100 overflow-hidden">
      <!-- 装饰背景 -->
      <div class="absolute top-0 left-0 w-full h-full">
        <div class="absolute top-10 left-10 w-8 h-8 bg-yellow-200 rounded-full opacity-50"></div>
        <div class="absolute top-20 right-20 w-12 h-12 bg-pink-200 rounded-full opacity-50"></div>
        <div class="absolute bottom-20 left-1/4 w-6 h-6 bg-blue-200 rounded-full opacity-50"></div>
        <div class="absolute bottom-10 right-1/3 w-10 h-10 bg-green-200 rounded-full opacity-50"></div>
      </div>

      <!-- 小新卡通标题 -->
      <div class="container mx-auto px-4 py-8 relative z-10">
        <div class="text-center">
          <!-- 小新图标 -->
          <div class="inline-block mb-3">
            <div class="w-16 h-16 md:w-24 md:h-24 bg-white rounded-full flex items-center justify-center mx-auto shadow-lg border-4 border-yellow-300">
              <span class="text-4xl md:text-6xl">👶</span>
            </div>
          </div>
          <!-- 标题文字 -->
          <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-center text-gray-800 tracking-wide shinchan-title mb-1">
            クレヨンしんちゃん
          </h1>
          <p class="text-xl md:text-2xl text-gray-700 font-medium">蜡笔小新官方网站</p>
        </div>
      </div>
    </div>

    <!-- 卡通风格导航菜单 -->
    <nav class="bg-gradient-to-r from-yellow-400 to-orange-400 text-white shadow-lg py-3 sticky top-0 z-50">
      <div class="container mx-auto px-4">
        <!-- 特色导航图标行 -->
        <div class="flex justify-between items-center mb-2">
          <div class="flex space-x-2">
            <div class="shinchan-btn-small bg-white/20 text-white p-1.5 rounded-full hover:bg-white/30 transition-all">
              <span class="text-lg">🔍</span>
            </div>
            <div class="shinchan-btn-small bg-white/20 text-white p-1.5 rounded-full hover:bg-white/30 transition-all">
              <span class="text-lg">📱</span>
            </div>
          </div>
          <div class="flex space-x-2">
            <div v-if="!currentUser">
              <button @click="openLogin" class="shinchan-btn-small bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all text-sm font-medium">
                登录
              </button>
              <button @click="openRegister" class="shinchan-btn bg-pink-500 text-white px-4 py-1.5 rounded-full hover:bg-pink-600 transition-all text-sm font-medium shadow-md">
                注册
              </button>
            </div>
            <div v-else class="flex items-center space-x-2">
              <span class="text-sm font-medium">欢迎, {{ currentUser.username }}</span>
              <button @click="handleLogout" class="shinchan-btn-small bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all text-sm font-medium">
                登出
              </button>
            </div>
          </div>
        </div>

        <!-- 主要导航链接 -->
        <div class="flex items-center space-x-1 md:space-x-3 overflow-x-auto py-2 scrollbar-hide w-full justify-center">
          <a href="#" class="shinchan-btn nav-btn bg-white text-yellow-600 px-3 py-1.5 rounded-full font-bold shadow-md transition-all whitespace-nowrap">首页</a>
          <a href="#" class="shinchan-btn nav-btn bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all whitespace-nowrap">故事介绍</a>
          <a href="#characters" class="shinchan-btn nav-btn bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all whitespace-nowrap">人物介绍</a>
          <a href="#" class="shinchan-btn nav-btn bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all whitespace-nowrap">动画图库</a>
          <a href="#" class="shinchan-btn nav-btn bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all whitespace-nowrap">剧场版</a>
          <a href="#" class="shinchan-btn nav-btn bg-white/20 text-white px-3 py-1.5 rounded-full hover:bg-white/30 transition-all whitespace-nowrap">游戏</a>
        </div>
      </div>
    </nav>

    <!-- 轮播图组件 -->
    <div class="w-full py-6 relative z-10">
      <div class="container mx-auto px-4">
        <div 
          class="relative w-full h-[clamp(200px,40vw,500px)] rounded-xl overflow-hidden shadow-xl"
          @mouseenter="stopAutoPlay"
          @mouseleave="startAutoPlay"
        >
          <!-- 轮播图片 -->
          <div 
            class="flex transition-transform duration-500 ease-out h-full"
            :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
          >
            <div v-for="item in carouselItems" :key="item.id" class="min-w-full h-full relative">
              <img 
                :src="item.image" 
                :alt="item.title" 
                class="w-full h-full object-cover"
              >
              <!-- 轮播图文字内容 -->
              <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                <h3 class="text-white text-2xl md:text-3xl font-bold mb-2">{{ item.title }}</h3>
                <p class="text-white/90 text-sm md:text-base">{{ item.description }}</p>
              </div>
            </div>
          </div>
          
          <!-- 卡通风格轮播控制按钮 -->
          <button 
            @click="prevSlide" 
            class="shinchan-btn-large absolute left-4 top-1/2 -translate-y-1/2 bg-white text-yellow-600 hover:bg-yellow-50 p-3 rounded-full shadow-lg transition-all transform hover:scale-110"
            aria-label="上一张"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          
          <button 
            @click="nextSlide" 
            class="shinchan-btn-large absolute right-4 top-1/2 -translate-y-1/2 bg-white text-yellow-600 hover:bg-yellow-50 p-3 rounded-full shadow-lg transition-all transform hover:scale-110"
            aria-label="下一张"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </button>
          
          <!-- 轮播指示器 -->
          <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
            <button 
              v-for="(item, index) in carouselItems" 
              :key="item.id"
              @click="goToSlide(index)"
              class="w-2.5 h-2.5 rounded-full transition-all"
              :class="index === currentSlide ? 'bg-white w-8' : 'bg-white/50'"
              :aria-label="`切换到第${index + 1}张`"
            ></button>
          </div>
        </div>
      </div>
    </div>

    <!-- 人物介绍部分 -->
    <section id="characters" class="container mx-auto px-4 py-12 relative z-10">
      <h2 class="text-3xl font-bold mb-8 text-center text-gray-800 shinchan-subtitle">
        <span class="inline-block w-8 h-8 bg-yellow-400 rounded-full mr-3"></span>
        人物介绍
        <span class="inline-block w-8 h-8 bg-yellow-400 rounded-full ml-3"></span>
      </h2>

      <!-- 动画角色卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div v-for="character in characters" :key="character.id" class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <div class="flex items-start p-4">
            <div :class="character.color" class="w-20 h-20 rounded-full flex items-center justify-center flex-shrink-0 border-4 border-white shadow-md">
              <img :src="character.image" :alt="character.name" class="w-full h-full object-cover rounded-full">
            </div>
            <div class="ml-4 flex-1">
              <h3 class="text-xl font-bold text-gray-800 mb-2">{{ character.name }}</h3>
              <p class="text-gray-600 leading-relaxed">{{ character.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 动画场景部分 -->
    <section class="container mx-auto px-4 py-12 relative z-10">
      <h2 class="text-3xl font-bold mb-8 text-center text-gray-800 shinchan-subtitle">
        <span class="inline-block w-8 h-8 bg-yellow-400 rounded-full mr-3"></span>
        动画场景
        <span class="inline-block w-8 h-8 bg-yellow-400 rounded-full ml-3"></span>
      </h2>

      <!-- 特色内容区 - 主题横幅 -->
      <div class="mb-10">
        <div class="bg-gradient-to-r from-yellow-400 to-orange-400 rounded-2xl p-6 shadow-lg">
          <h3 class="text-2xl font-bold text-white text-center mb-4">蜡笔小新最新剧场版</h3>
          <p class="text-white text-center mb-6">《野原广志の! 大成功?! 冒険物语》将于2025年夏季上映！</p>
          <div class="flex justify-center">
            <button class="shinchan-btn main-btn bg-white text-yellow-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-yellow-50 transition-all transform hover:scale-110">
              查看详情
            </button>
          </div>
        </div>
      </div>

      <!-- 动画场景卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <img src="https://picsum.photos/seed/shinchan-scene1/600/400" alt="蜡笔小新场景1" class="w-full h-52 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold text-gray-800 mb-2">幼稚园日常</h3>
            <p class="text-gray-600">小新在双叶幼稚园与朋友们一起度过的欢乐时光，充满了童趣和笑声。</p>
          </div>
        </div>
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <img src="https://picsum.photos/seed/shinchan-scene2/600/400" alt="蜡笔小新场景2" class="w-full h-52 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold text-gray-800 mb-2">家庭生活</h3>
            <p class="text-gray-600">野原一家的日常生活，有欢笑也有争吵，但充满了温馨和爱。</p>
          </div>
        </div>
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <img src="https://picsum.photos/seed/shinchan-scene3/600/400" alt="蜡笔小新场景3" class="w-full h-52 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold text-gray-800 mb-2">户外冒险</h3>
            <p class="text-gray-600">小新和家人、朋友们一起外出游玩的冒险经历，探索世界的美好。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色内容 - 快速导航图标 -->
    <section class="container mx-auto px-4 py-12 relative z-10">
      <div class="grid grid-cols-4 md:grid-cols-8 gap-4 md:gap-6">
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-yellow-100 rounded-full flex items-center justify-center shadow-md hover:bg-yellow-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-yellow-600 font-bold">🏠</span>
          </div>
          <span class="text-sm text-gray-600">首页</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-blue-100 rounded-full flex items-center justify-center shadow-md hover:bg-blue-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-blue-600 font-bold">📖</span>
          </div>
          <span class="text-sm text-gray-600">故事</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-red-100 rounded-full flex items-center justify-center shadow-md hover:bg-red-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-red-600 font-bold">🎭</span>
          </div>
          <span class="text-sm text-gray-600">角色</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-green-100 rounded-full flex items-center justify-center shadow-md hover:bg-green-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-green-600 font-bold">🎬</span>
          </div>
          <span class="text-sm text-gray-600">剧场版</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-purple-100 rounded-full flex items-center justify-center shadow-md hover:bg-purple-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-purple-600 font-bold">🖼️</span>
          </div>
          <span class="text-sm text-gray-600">图库</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-pink-100 rounded-full flex items-center justify-center shadow-md hover:bg-pink-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-pink-600 font-bold">🎮</span>
          </div>
          <span class="text-sm text-gray-600">游戏</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-orange-100 rounded-full flex items-center justify-center shadow-md hover:bg-orange-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-orange-600 font-bold">🛒</span>
          </div>
          <span class="text-sm text-gray-600">周边</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 md:w-20 md:h-20 bg-teal-100 rounded-full flex items-center justify-center shadow-md hover:bg-teal-200 transition-all transform hover:scale-110 mb-2">
            <span class="text-2xl md:text-3xl text-teal-600 font-bold">📱</span>
          </div>
          <span class="text-sm text-gray-600">APP</span>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gradient-to-r from-yellow-600 to-orange-600 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <p class="text-xl font-bold mb-2">クレヨンしんちゃん</p>
            <p>蜡笔小新官方网站</p>
          </div>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="mt-6 text-center">
          <p>&copy; 2024 版权所有 | 让我们一起享受蜡笔小新的欢乐世界！</p>
        </div>
      </div>
    </footer>

    <!-- 登录模态框 -->
    <div v-if="showLoginModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform transition-all animate-fade-in">
        <div class="p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-2xl font-bold text-yellow-600">登录</h3>
            <button @click="closeModals" class="text-gray-500 hover:text-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
              <input
                v-model="loginForm.username"
                type="text"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all"
                placeholder="请输入用户名"
              >
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <input
                v-model="loginForm.password"
                type="password"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all"
                placeholder="请输入密码"
              >
            </div>
          </div>
          
          <div class="mt-6">
            <button 
              @click="handleLogin"
              class="shinchan-btn main-btn w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-xl transition-all shadow-lg transform hover:scale-105"
            >
              登录
            </button>
          </div>
          
          <div class="mt-4 text-center">
            <span class="text-gray-600">还没有账号？</span>
            <button @click="openRegister" class="text-yellow-600 hover:text-yellow-700 font-medium ml-1">
              立即注册
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 注册模态框 -->
    <div v-if="showRegisterModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform transition-all animate-fade-in">
        <div class="p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-2xl font-bold text-yellow-600">注册</h3>
            <button @click="closeModals" class="text-gray-500 hover:text-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
              <input
                v-model="registerForm.username"
                type="text"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all"
                placeholder="请输入用户名"
              >
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <input
                v-model="registerForm.password"
                type="password"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all"
                placeholder="请输入密码"
              >
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
              <input
                v-model="registerForm.confirmPassword"
                type="password"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all"
                placeholder="请再次输入密码"
              >
            </div>
          </div>
          
          <div class="mt-6">
            <button 
              @click="handleRegister"
              class="shinchan-btn main-btn w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-xl transition-all shadow-lg transform hover:scale-105"
            >
              注册
            </button>
          </div>
          
          <div class="mt-4 text-center">
            <span class="text-gray-600">已有账号？</span>
            <button @click="openLogin" class="text-yellow-600 hover:text-yellow-700 font-medium ml-1">
              立即登录
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
/* 蜡笔小新风格的按钮样式 */
.shinchan-btn {
  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.shinchan-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #FFD700, #FFA500, #FF6347, #FFD700);
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shinchan-btn:hover::before {
  opacity: 1;
  animation: borderShine 2s linear infinite;
}

@keyframes borderShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 主按钮样式 */
.main-btn {
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 导航按钮样式 */
.nav-btn {
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 大按钮样式 */
.shinchan-btn-large {
  border: 2px solid #FFD700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 小按钮样式 */
.shinchan-btn-small {
  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
}

.shinchan-btn-small:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* 艺术字标题样式 */
.shinchan-title {
  text-shadow: 3px 3px 0 #FFA500, 6px 6px 0 rgba(0,0,0,0.1);
  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  letter-spacing: 2px;
  animation: titleFloat 3s ease-in-out infinite;
}

/* 副标题样式 */
.shinchan-subtitle {
  text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  letter-spacing: 1px;
}

/* 标题浮动动画 */
@keyframes titleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 滚动条隐藏 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 模态框动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* 卡片悬停动画 */
.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* 按钮动画 */
.btn-pop {
  transition: all 0.2s ease;
}
.btn-pop:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .shinchan-title {
    font-size: 2.5rem;
  }
  
  .shinchan-subtitle {
    font-size: 1.8rem;
  }
}
</style>